<template>
  <Header>
    <div class="left">
      <span v-if="isLogin" class="username">{{ username }}</span>
      <span v-else class="webinfo-name">{{ webinfo.name }}</span>
      <Divider type="vertical" />

      <!-- 导入 -->
      <import-Json></import-Json>
      <Divider type="vertical" />
      <import-file></import-file>
      <Divider type="vertical" />
      <Button type="text" to="/template" target="_blank">全部模板</Button>
      <Divider type="vertical" />

      <myTemplName></myTemplName>
      <!-- 标尺开关 -->
      <Tooltip :content="$t('grid')">
        <iSwitch v-model="toggleModel" size="small" class="switch"></iSwitch>
      </Tooltip>
      <Divider type="vertical" />
      <history></history>
    </div>

    <div class="right">
      <a href="https://pro.kuaitu.cc/" target="_blank" alt="商业版">
        <img width="15" :src="proIcon" alt="vue-fbric-editor" />
      </a>
      <!-- 管理员模式 -->
      <admin />
      <!-- 预览 -->
      <previewCurrent />
      <waterMark />
      <save></save>
      <!-- 用户信息 -->
      <div v-if="isLogin" class="user-info">
        <Avatar :src="userInfo.avatar" />
        <span class="username">{{ userInfo.username }}</span>
      </div>
      <login v-else></login>
      <lang></lang>
    </div>
  </Header>
</template>

<script name="Top" setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { logout } from '@/api/user';
import proIcon from '@/assets/icon/proIcon.png';
// 导入元素
import importJson from '@/components/importJSON.vue';
import importFile from '@/components/importFile.vue';

// 顶部组件
import logo from '@/components/logo.vue';
import myTemplName from '@/components/myTemplName.vue';
import previewCurrent from '@/components/previewCurrent';
import save from '@/components/save.vue';
import lang from '@/components/lang.vue';
import waterMark from '@/components/waterMark.vue';
import login from '@/components/login';
import admin from '@/components/admin';
import history from '@/components/history.vue';

const props = defineProps(['ruler']);
const emit = defineEmits(['update:ruler']);

const toggleModel = computed({
  get() {
    return props.ruler;
  },
  set(value) {
    emit('update:ruler', value);
  },
});

// 用户登录状态
const isLogin = ref(false);
const userInfo = ref({
  username: '',
  avatar: '',
});

const username = ref('');
const webinfo = ref({ name: 'LOGO' });

const checkLoginStatus = () => {
  const token = localStorage.getItem('token');
  const userInfoStr = localStorage.getItem('userInfo');
  isLogin.value = !!token;
  if (userInfoStr) {
    try {
      userInfo.value = JSON.parse(userInfoStr);
      username.value = userInfo.value.username;
    } catch (e) {
      console.error('解析用户信息失败:', e);
      logout();
    }
  }
};

// 监听登录状态变化
window.addEventListener('storage', (e) => {
  if (e.key === 'userInfo' || e.key === 'token') {
    checkLoginStatus();
  }
});

onMounted(() => {
  checkLoginStatus();
});
</script>

<style lang="less" scoped>
.left,
.right {
  display: flex;
  align-items: center;
  img {
    display: block;
    margin-right: 10px;
  }
}

.right {
  .user-info {
    display: flex;
    align-items: center;
    margin-right: 10px;
    .username {
      margin-left: 5px;
      font-size: 14px;
    }
  }
}

.top-bar {
  display: flex;
  align-items: center;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
}
.top-left {
  flex: 0 0 auto;
  padding-left: 24px;
  font-size: 20px;
  font-weight: bold;
}
.username {
  color: #3a7afe;
}
.webinfo-name {
  color: #333;
}
</style>
